<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        text-align: center;
    }
    #importBillTable{
        margin:30px auto;
        width:100%;
        height:100%;
    }
</style>
<link rel="stylesheet" href="../lib/layui-v2.1.6/layui/css/layui.css">
<body>
    <table class="layui-form" id="importBillTable">
        <tr>
            <td class="layui-input-inline">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-inline">
                    <select name="projectName" lay-verify="required" lay-serach="" id="projectNameSelect">
                        <option value="">直接选择或者搜索选择</option>
                        <option value="1">阿斯顿</option>
                        <option value="2">DSA</option>
                        <option value="3">气温</option>
                        <option value="4">额外去</option>
                        <option value="5">主线程</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr>
            <td class="layui-input-inline">
                <label class="layui-form-label">费用类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="costType" value="收入" class="layui-input" disabled="disabled">
                </div>
            </td>
        </tr>
        <tr>
            <td class="layui-input-inline">
                <label class="layui-form-label">费用金额</label>
                <div class="layui-input-inline">
                    <input type="text" name="cost" lay-verify="number" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
            </td>
        </tr>
        <tr>
            <td class="layui-input-inline">
                <label class="layui-form-label">其他备注</label>
                <div class="layui-input-inline">
                    <textarea name="extraInfo" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input id="submit" style="display:none" type="button" lay-submit lay-filter="*">
            </td>
        </tr>
    </table>

</body>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui-v2.1.6/layui/layui.js"></script>
<script>
    var isSuccess=0;        //判断是否新增成功
    layui.use(['form'],function () {
       var form=layui.form;
       var $=layui.jquery;
       form.render();   //layui form表单更新渲染
       resize();        //屏幕大小自适应
       listen();        //监听事件
       editData();      //编辑按钮打开此页面时获取数据并初始化
       function editData(){
           var editData=JSON.parse(localStorage.getItem("editTableData"));
           localStorage.removeItem("editTableData");
           if(editData!=null){
               $("#projectNameSelect option").eq(editData.projectId).attr("selected",true);
               $("input[name='cost']").val(editData.cost);
               $("textarea[name='extraInfo']").val(editData.extraInfo);
               form.render();
           }
       }
       function resize(){
           var bodyHeight=parent.$('#iframeHeight').val()*0.7;
           var bodyWidth=parent.$('#iframeWidth').val()*0.96;
           $('body').css({'height':bodyHeight,'width':bodyWidth});
           var iconSize=$(document.body).width()*0.05;
           $('.icon').css({'font-size':iconSize});
       }
       function listen(){
           form.on('submit(*)',function () {   //提交监听
               var data=formData();     //获取表单数据
               localStorage.setItem("importBillIframeData",JSON.stringify(data));  //传值
               isSuccess=200;
               $("select[name='projectName']").find("option:selected").val("");
               $("input[name='costType']").val("");
               $("input[name='cost']").val("");
               $("textarea[name='extraInfo']").val("");
               form.render();
           })
           $('.icon').mouseenter(function () {
              $('.icon').css({'color':'#1E9FFF'});
           });
           $('.icon').mouseleave(function () {
               $('.icon').css({'color':'#000000'});
           });
       }
    });
    function formData(){        //获取表单数据
        var projectId=$("select[name='projectName']").find("option:selected").val();
        var projectName=$("select[name='projectName']").find("option:selected").text();
        var costType=$("input[name='costType']").val();
        var cost=$("input[name='cost']").val();
        var extraInfo=$("textarea[name='extraInfo']").val();
        var data={
            "projectId":projectId,
            "projectName":projectName,
            "costType":costType,
            "cost":cost,
            "extraInfo":extraInfo
        }
        return data;
    }
    function submit(){      //父框点击新增框的新增按钮调用此函数
        $('#submit').click();
        var is=isSuccess;
        isSuccess=0;
        return is;
    }
</script>
</html>